<!-- 马少博  创建于 2018年5月22日10:11:46 -->
<!DOCTYPE html>
<html lang='en'>

	<head>
		<meta charset='utf-8'>
		<meta http-equiv='X-UA-Compatible' content='IE=edge'>
		<meta name='viewport' content='width=device-width, initial-scale=1'>
		<title>问卷调查</title>
		<link href='http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css' rel='stylesheet'>
		<link rel="stylesheet" type="text/css" href="bootstrap/icheck/skins/all.css" />
		<style>
			* {
				font-family: "MicroSoft YaHei";
				margin: 0;
				padding: 0;
			}
			
			body,
			html {
				width: 100%;
				height: 100%;
			}
			
			#questionTitle {
				line-height: 1.5;
				width: 50%;
				margin: 0 auto;
				min-width: 600px;
			}
			
			.a {
				margin: 0;
				padding: 0;
				height: 100%;
				width: 100%;
			}
			
			.body {
				height: 3000px;
				width: 100%;
				/* background-image: url(images/quan-back.png); */
				background-size: 1600px;
				background-repeat: no-repeat;
				background-color: #f2f8ff;
			}
			
			.contents {
				color: #fff;
				height: 200px;
				padding: 20px;
				background: url(images/quan/web-banner-bg.png) center -30px no-repeat;
			}
			/*
      :::::'##::: ##::'#######::'########:'########:
      ::::: ###:: ##:'##.... ##:... ##..:: ##.....::
      ::::: ####: ##: ##:::: ##:::: ##:::: ##:::::::
      ::::: ## ## ##: ##:::: ##:::: ##:::: ######:::
      ::::: ##. ####: ##:::: ##:::: ##:::: ##...::::
      '###: ##:. ###: ##:::: ##:::: ##:::: ##:::::::
       ###: ##::. ##:. #######::::: ##:::: ########:
      ...::..::::..:::.......::::::..:::::........::
      */
			/* 问卷调查说明 */
			
			.q-note {
				position: relative;
				width: 900px;
				min-height: 400px;
				margin: 40px auto;
				border: 2px solid #08254D;
				border-radius: 20px;
			}
			/* 问题详情 */
			
			.q-detail {
				position: relative;
				width: 900px;
				min-height: 400px;
				margin: 0 auto;
			}
			/* 开始答题按钮 */
			
			.btn-begin {
				/* margin-top: 40px; */
				outline: none;
				width: 300px;
				border: 2px solid #08254D;
				height: 60px;
				font-size: 24px;
				color: #fff;
				border-radius: 12px;
				background-color: #116ff0;
			}
			
			.btn:hover {
				color: #fff;
				background-color: #3d8fff;
			}
			
			.btn:focus {
				color: #fff;
				outline: none;
				background-color: #3d8fff;
				border-color: #08254D;
			}
			
			.btn:active {
				outline: none;
				color: #fff;
				background-color: #3d8fff;
				border-color: #08254D;
			}
			
			.btn:focus:hover {
				outline: none;
			}
			/* 头部说明标签 */
			
			.q-note-title {
				color: #fff;
				display: block;
				font-size: 24px;
				width: 160px;
				text-align: center;
				line-height: 48px;
				background-image: url(images/quan/web-note.png);
				position: absolute;
				left: 50%;
				top: 12px;
				margin-left: -80px;
				margin-top: -24px;
			}
			/* 问题显示区域 */
			
			.q-note-block {
				width: 780px;
				margin: 0 auto;
				margin-top: 60px;
				color: #1a1a1a;
				font-size: 18px;
			}
			
			.btn-list-block {
				width: 440px;
				height: 60px;
				margin: 0 auto;
			}
			
			.btn-list-block>button {
				outline: none;
				width: 200px;
				border: 2px solid #08254D;
				height: 60px;
				font-size: 24px;
				color: #fff;
				border-radius: 12px;
				background-color: #116ff0;
			}
			
			.btn-left {
				float: left;
			}
			
			.btn-right {
				float: right;
			}
			
			.q-wenti {
				font-weight: bold;
				font-size: 0;
			}
			
			.q-wenti>span {
				font-size: 18px;
			}
			
			.q-ans-block {
				width: 740px;
				margin: 0 auto;
				font-size: 16px;
			}
			
			.q-ans-input {}
			
			.choice-list {
				margin-left: 0;
				padding-left: 0;
			}
			
			.q-wenti-index {
				display: inline-block;
				min-width: 20px;
				text-align: right;
			}
			
			.choice-list>li {
				list-style: none;
				font-size: 16px;
				margin-top: 6px;
			}
			
			.choice-list>li label {
				cursor: pointer;
				font-weight: normal;
				margin-bottom: 0;
			}
			
			.choice-list input {
				cursor: pointer;
			}
			
			.q-ans-input>textarea {
				border-color: #c4c0cc;
				padding: 12px 24px;
				font-size: 16px;
			}
			
			.last-words {
				font-size: 14px;
				color: #666666;
				margin-top: 6px;
			}
			
			.q-sbumit {
				margin-top: 120px;
				text-align: center;
			}
			
			.q-success {
				font-size: 24px;
				color: #333333;
				font-weight: bold;
				margin-top: 20px;
			}
			
			textarea {
				resize: none;
				outline: none;
			}
			
			.q-answer {
				height: 350px;
				position: absolute;
				top: 280px;
				writing-mode: vertical-rl;
				/*ie兼容*/
				writing-mode: tb-rl;
			}
			
			.q-answer-content {
				width: 22px;
				height: 22px;
				text-align: center;
				line-height: 22px;
				background: url(images/quan/web-unclick.png) center center no-repeat;
				cursor: pointer;
				display: inline-block;
				writing-mode: horizontal-tb;
				/*ie兼容*/
				writing-mode: lr-tb;
				margin: 4px;
			}
			
			.q-answer .q-answer-active {
				background: url(images/quan/web-checked.png) center center no-repeat;
				color: white;
			}
		</style>
	</head>

	<body>
		<div class="body">
			<div class="contents">
				<h1 class="text-center" id="questionTitle">关于神州浩天的服务说明是今天</h1>
			</div>
			<!-- 问题的容器 -->
			<div class="q-container">

			</div>

			<!--
    :'######:::'######::'########::'####:'########::'########:
    '##... ##:'##... ##: ##.... ##:. ##:: ##.... ##:... ##..::
     ##:::..:: ##:::..:: ##:::: ##:: ##:: ##:::: ##:::: ##::::
    . ######:: ##::::::: ########::: ##:: ########::::: ##::::
    :..... ##: ##::::::: ##.. ##:::: ##:: ##.....:::::: ##::::
    '##::: ##: ##::: ##: ##::. ##::: ##:: ##::::::::::: ##::::
    . ######::. ######:: ##:::. ##:'####: ##::::::::::: ##::::
    :......::::......:::..:::::..::....::..::::::::::::..:::::
    -->
			<!-- 脚本 -->
			<!-- <script src='Script/jquery-1.9.1.js'></script> -->
			<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
			<script src="bootstrap/icheck/icheck.js" type="text/javascript" charset="utf-8"></script>
			<script src='http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>
			<script>
				$(document).ready(function() {
					titleHandle();
					lastWordsHandle();
					singleQuestionHandle();
					quesMsg();
					//美化按钮
					$('input').iCheck({
						checkboxClass: 'icheckbox_flat-blue',
						radioClass: 'iradio_flat-blue'
					});
				});

				/**
				 * 单个问题的答案选择事件 
				 */
				function singleQuestionHandle() {
					//选择时赋值
					$('.body').find(".q-note").on("ifChecked", function(e) {
						var choiceType = $(this).find(".choice-list").attr("data-choice-type");
						var $hiddenAns = $(this).find('.hidden-ans');
						if(choiceType == '1') {
							var val = $(this).find('input:radio:checked').val();
							$hiddenAns.val(val)
						} else if(choiceType == '2') {
							var item = [];
							$(this).find('input:checkbox').each(function() {
								if($(this).is(":checked")) {
									item.push($(this).val());
								}
							});
							$hiddenAns.val(item)
						}
					});
					//取消选择时赋值
					$('.body').find(".q-note").on("ifUnchecked", function(e) {
						var choiceType = $(this).find(".choice-list").attr("data-choice-type");
						var $hiddenAns = $(this).find('.hidden-ans');
						if(choiceType == '1') {
							var val = $(this).find('input:radio:checked').val();
							$hiddenAns.val(val)
						} else if(choiceType == '2') {
							var item = [];
							$(this).find('input:checkbox').each(function() {
								if($(this).is(":checked")) {
									item.push($(this).val());
								}
							});
							$hiddenAns.val(item)
						}
					});
					//答案序号的位置
					var width = document.documentElement.clientWidth / 2;
					var left = width + 480;
					$(".q-answer").css("left", left + "px");
				}
				/**
				 * 输入答案时的剩余字数
				 */
				function lastWordsHandle() {
					$('body').on('input propertychange', '.q-ans-input>textarea', function() {
						var len = $(this).val().length;
						$(this).next().find('.word-length').text(len);
					});
				}

				/**
				 *  关于标题的处理(字体及折行)
				 *  长度超出12折行 并且上边字数少 下边字数多
				 */
				function titleHandle() {
					var title =$("#questionTitle").text().trim();
					if(title.length > 12) {
						$("#questionTitle").css('font-size', '42px');
						if(title.length % 2 == 0) {
							title = title.substr(0, (title.length - 4) / 2) + "<br/>" + title.substr((title.length - 4) / 2);
						} else {
							title = title.substr(0, (title.length - 3) / 2) + "<br/>" + title.substr((title.length - 3) / 2);
						}
						$("#questionTitle").html(title);
					} else {
						$("#questionTitle").css('font-size', '56px');
					}

				}

			
				//发送请求，得到问卷问题信息
				function quesMsg() {
					var qJson = {
						"view": null,
						"model": {
							"info": {
								"questions": [{
									"qustion": {
										"id": 1,
										"qnaId": 2,
										"stem": "你最喜欢的水果是？",
										"type": "1"
									},
									"options": [{
										"id": 1,
										"qnaId": 2,
										"quesId": 1,
										"content": "草莓",
										"poll": null
									}, {
										"id": 2,
										"qnaId": 2,
										"quesId": 1,
										"content": "樱桃",
										"poll": null
									}, {
										"id": 3,
										"qnaId": 2,
										"quesId": 1,
										"content": "芭乐",
										"poll": null
									}, {
										"id": 4,
										"qnaId": 2,
										"quesId": 1,
										"content": "西瓜",
										"poll": null
									}]
								}, {
									"qustion": {
										"id": 2,
										"qnaId": 2,
										"stem": "想去哪些地方看看？",
										"type": "2"
									},
									"options": [{
										"id": 5,
										"qnaId": 2,
										"quesId": 2,
										"content": "加拿大-魁北克",
										"poll": null
									}, {
										"id": 6,
										"qnaId": 2,
										"quesId": 2,
										"content": "泰国-清迈",
										"poll": null
									}, {
										"id": 7,
										"qnaId": 2,
										"quesId": 2,
										"content": "中国-上海",
										"poll": null
									}, {
										"id": 8,
										"qnaId": 2,
										"quesId": 2,
										"content": "中国-北京",
										"poll": null
									}]
								}, {
									"qustion": {
										"id": 3,
										"qnaId": 2,
										"stem": "你最讨厌哪些运动？",
										"type": "3"
									},
									"options": [{
										"id": 9,
										"qnaId": 2,
										"quesId": 3,
										"content": "仰卧起坐",
										"poll": null
									}, {
										"id": 10,
										"qnaId": 2,
										"quesId": 3,
										"content": "跑步",
										"poll": null
									}, {
										"id": 11,
										"qnaId": 2,
										"quesId": 3,
										"content": "蹲起",
										"poll": null
									}, {
										"id": 12,
										"qnaId": 2,
										"quesId": 3,
										"content": "俯卧撑",
										"poll": null
									}]
								}, {
									"qustion": {
										"id": 4,
										"qnaId": 2,
										"stem": "你觉得绝味鸭脖里的卤味哪些比较好吃？",
										"type": "4"
									},
									"options": [{
										"id": 13,
										"qnaId": 2,
										"quesId": 4,
										"content": "辣的鸡翅尖",
										"poll": null
									}, {
										"id": 14,
										"qnaId": 2,
										"quesId": 4,
										"content": "辣的鸭脖",
										"poll": null
									}, {
										"id": 15,
										"qnaId": 2,
										"quesId": 4,
										"content": "毛豆",
										"poll": null
									}, {
										"id": 16,
										"qnaId": 2,
										"quesId": 4,
										"content": "鸭肠",
										"poll": null
									}, {
										"id": 17,
										"qnaId": 2,
										"quesId": 4,
										"content": "鸭舌",
										"poll": null
									}, {
										"id": 18,
										"qnaId": 2,
										"quesId": 4,
										"content": "鸭锁骨",
										"poll": null
									}]
								}, {
									"qustion": {
										"id": 5,
										"qnaId": 2,
										"stem": "您有什么建议或意见吗？",
										"type": "5"
									}
								}]
							},
							"type": "view"
						},
						"empty": false,
						"viewName": "/website/qnaManage/questionOpera",
						"reference": true,
					}
					var ques = qJson.model.info.questions;
					var html = '<div class="q-note">' +
						'				<span class="q-note-title">说明</span>' +
						'				<div class="q-note-block">' +
						'					<ul>' +
						'						<li>开始答题</li>' +
						'						<li>开始答题</li>' +
						'						<li>开始答题</li>' +
						'					</ul>' +
						'				</div>' +
						'			</div>' +
						'			<div class="text-center">' +
						'				<button type="button" class="btn btn-begin">开始答题</button>' +
						'			</div>';
					html += '<div class="q-answer">';
					//创建答案序号
					for(var i = 0; i < ques.length; i++) {
						html += '<span class="q-answer-content">' +
							'	    <span class="q-answer-index">' +
							(i + 1) +
							'	    </span>' +
							'	 </span>';
					}
					html += '</div>';
					//循环创建问题
					for(var i = 0; i < ques.length; i++) {
						var question = ques[i].qustion;
						var options = ques[i].options;
						if(question.type == '1' || question.type == '3') {
							html += '<div class="q-note" data-index="" data-id="">' +
								'		<span class="q-note-title">' +
								'            <span class="question-index">' + (i + 1) + '</span>&nbsp;/&nbsp;<span class="question-total">' + ques.length + '</span>' +
								'		</span>' +
								'		<div class="q-note-block">' +
								'			<p class="q-wenti">' +
								'				<span class="question-index q-wenti-index">' + (i + 1) + '、</span>' +
								'				<span class="q-body">' + question.stem + '</span>' +
								'				<span class="q-type q-body">（单选）</span>' +
								'			 </p>' +
								'		</div>' +
								'<div class="q-ans-block">' +
								'		<input type="hidden" name="" class="hidden-ans" data-hidden-ans="1" value="">' +
								'		<ul class="choice-list" data-choice-type="1">';
							for(var j = 0; j < options.length; j++) {
								html += '<li>' +
									'			<input type="radio" name="ans-id-' + question.id + '" id="ans-ids-' + options[j].id + '" value="' + options[j].id + '">' +
									'			<label for="ans-ids-1">' + options[j].content + '</label>' +
									'	 </li>';
							}
							if(question.type == '3') {
								html += '</ul>' +
									'		<div class="q-ans-input">' +
									'			<textarea name="" id="" cols="30" rows="5" class="form-control" placeholder="请在此输入您的答案" maxlength="1000"></textarea>' +
									'			<p class="text-right last-words">字数:<span class="word-length">0</span>/1000</p>' +
									'		</div>';
							} else {
								html += '</ul>';
							}
							html += '</div></div>';
						} else if(question.type == '2' || question.type == '4') {
							html += '<div class="q-note" data-index="" data-id="">' +
								'				<span class="q-note-title">' +
								'                <span class="question-index">' + (i + 1) + '</span>&nbsp;/&nbsp;<span class="question-total">' + ques.length + '</span>' +
								'				</span>' +
								'				<div class="q-note-block">' +
								'					<p class="q-wenti">' +
								'						<span class="question-index q-wenti-index">' + (i + 1) + '、</span>' +
								'						<span class="q-body">' + question.stem + '</span>' +
								'						<span class="q-type q-body">（多选）</span>' +
								'					</p>' +
								'				</div>' +
								'<div class="q-ans-block">' +
								'	<input type="hidden" name="" class="hidden-ans" data-hidden-ans="2" value="">' +
								'		<ul class="choice-list" data-choice-type="2">';
							for(var j = 0; j < options.length; j++) {
								html += '<li>' +
									'			<input type="checkbox" name="ans-id-' + question.id + '" id="ans-ids-' + options[j].id + '" value="' + options[j].id + '">' +
									'			<label for="ans-ids-1">' + options[j].content + '</label>' +
									'		</li>';
							}
							if(question.type == '4') {
								html += '</ul>' +
									'		  <div class="q-ans-input">' +
									'			  <textarea name="" id="" cols="30" rows="5" class="form-control" placeholder="请在此输入您的答案" maxlength="1000"></textarea>' +
									'			  <p class="text-right last-words">字数:<span class="word-length">0</span>/1000</p>' +
									'		  </div>';
							} else {
								html += '</ul>';
							}
							html += '</div></div>';
						} else if(question.type == '5') {
							html += '<div class="q-note" data-index="" data-id="">' +
								'				<span class="q-note-title">' +
								'                <span class="question-index">' + (i + 1) + '</span>&nbsp;/&nbsp;<span class="question-total">' + ques.length + '</span>' +
								'				</span>' +
								'				<div class="q-note-block">' +
								'					<p class="q-wenti">' +
								'						<span class="question-index q-wenti-index">20.</span>' +
								'						<span class="q-body">您对我们有什么建议?</span>' +
								'						<span class="q-type q-body">（问答）</span>' +
								'					</p>' +
								'				</div>' +
								'				<div class="q-ans-block">' +
								'					<div class="q-ans-input" style="margin-top: 20px;">' +
								'						<textarea name="" id="" cols="30" rows="10" class="form-control" placeholder="请在此输入您的答案" maxlength="1000"></textarea>' +
								'						<p class="text-right last-words">字数:<span class="word-length">0</span>/1000</p>' +
								'					</div>' +
								'				</div>' +
								'			</div>';
						}
					}
					html += '<div class="q-note" data-index="" data-id="">' +
						'				<div class="q-note-block">' +
						'					<div class="q-sbumit">' +
						'						<p><img src="images/quan/web80-submit.png" width="80px" /></p>' +
						'						<p class="q-success">提交成功，感谢您的支持！</p>' +
						'					</div>' +
						'	            </div>' +
						'	 </div>' +
						'	<div class="btn-list-block">' +
						'				<button type="button" class="btn btn-left">上一题</button>' +
						'				<button type="button" class="btn btn-right">下一题</button>' +
						'			</div>';
					$(".q-container").html(html);
					singleQuestionHandle();
				}
			</script>

	</body>

</html>